<!-- 角色列表 
    从分页组件传了两个事件过来pageChange
-->
<template>
    <div class="main"  @scroll.passive="scrollTop($event)">
        <!-- 角色名称头部 -->
        <div class="role-top">
            <el-space wrap :size="10">
                <span>角色名称:</span>
                <el-input v-model="name" clearable />
                <span>描述信息:</span>
                <el-input v-model="desc" clearable />
                <el-button type="primary" size="default" @click="add">添加</el-button>
            </el-space>
        </div>
        <!-- 角色列表 -->
        <div class="role-toble">
            <el-table :data="obj.tableData" border style="width: 100%;">
                <el-table-column prop="name" label="角色名称" align="center" />
                <el-table-column prop="desc" label="说明" align="center" />
                <el-table-column prop="requestId" label="操作" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.id!=1">
                            <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button type="primary" @click="handleAuthorization(scope.$index, scope.row)">授权
                            </el-button>
                            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 角色修改弹出框 -->
            <el-dialog v-model="dialogFormVisible" title="修改信息">
                <el-form :model="form">
                    <el-space wrap :size="10">
                        <el-form-item label="角色名称:">
                            <el-input v-model="form.name" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="描述信息:">
                            <el-input v-model="form.desc" autocomplete="off" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="etidConfirm">修改</el-button>
                        </el-form-item>
                    </el-space>
                </el-form>
            </el-dialog>
            <!-- 角色权限配置弹出框 -->
            <el-dialog v-model="dialogTableVisible" title="权限配置">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" show-checkbox node-key="id" 
                 :default-checked-keys="assignedPermissions" ref="treeRef">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <span>{{ node.label }}</span>
                            <span v-if="data.api">{{ data.id }}</span>
                        </span>
                    </template>
                </el-tree>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogTableVisible = false">取消</el-button>
                        <el-button type="primary" @click="configurePermissions">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!-- 分页组件 -->
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange"></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main"  :visibility-height="0"  v-if="bool"/>
    </div>
</template>
<script setup lang="ts">
import { nextTick, reactive, ref,watch } from 'vue'
import { get,post } from "@/utils/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import Paging from "@/components/paging/Paging.vue";
import { ClassPagination } from "#/index";
interface Tree {
    label: string
    children?: Tree[]
}

let bool = ref(true)  //用来判断滚动组件的显示隐藏
let rollHeight = ref(0)  //滚动距离
const main = ref()  //滚动组件对象的引用
const dialogFormVisible = ref(false) //控制修改框是否可见
const dialogTableVisible = ref(false) //授权弹出框是否可见
const name = ref('')//角色名称
const desc = ref('') //描述信息
const obj = reactive({
    tableData: []//角色列表数组
})
//修改弹出框数据
const form = reactive({
    name: '',  //角色名称
    desc: '',  //角色描述
    status: 1, 
    id: 0,
})

//分页数据
let pagingDatas = reactive(new ClassPagination())
//角色列表请求方法
const roleList = () => {
    //角色列表请求需要传递的数据
    let data = {
        _gp: "admin.role",
        _mt: "list",
        name: '',
        page: pagingDatas.page,
        limit: pagingDatas.limit
    }
    get(data).then((res) => {
        console.log(res)
        if (200 == res.errno) {
            obj.tableData = res.data.items //把接口获取到的数据赋值给角色列表数组
            pagingDatas.total = res.data.total //把接口获取到的数据赋值给总条数
        }else{
            pagingDatas.total = 0
            ElMessage.error(res.errmsg)
        }
    })
}
//添加
const add = () => {
    if(name.value!=""){
    //角色添加请求的数据
    let data = {
        _gp: "admin.role",
        _mt: "create",
        role: { name: name.value, desc: desc.value, status: 1 }
    }
    get(data).then((res) => {
        if (200 == res.errno) {
            ElMessage.success("添加成功")
            name.value = '' //清除添加弹出框名称的数据
            desc.value = '' //清除添加弹出框描述的数据
            roleList()
        }else{
            ElMessage.error(res.errmsg)
        }
    })
    }else{
        ElMessage.error("角色名称不能为空")
    }
   
}
//修改
const handleEdit = (index: number, row: TypeRow) => {
    console.log(index, row)
    dialogFormVisible.value = true //显示弹出框
    form.name = row.name //把当前行的名称赋给当前框的角色名称
    form.desc = row.desc  //把当前行的描述赋给当前框的角色描述
    form.status = row.status //把当前行的status赋给当前框的status
    form.id = row.id //把当前行的id赋给当前框的id
}

//修改确认
const etidConfirm = () => {
    //角色修改请求的数据
    let data = {
        _gp: "admin.role",
        _mt: "update",
        role: { name: form.name, desc: form.desc, status: form.status, id: form.id }
    }
    if(form.name!=""){
        get(data).then((res) => {
        console.log(res)
        if (200 == res.errno) {
            ElMessage.success("修改成功")
            dialogFormVisible.value = false
            roleList()
        }
    })
   }else{
    ElMessage.error("角色名称不能为空")
   }
  
}

//删除
const handleDelete = (index: number, row: TypeRow) => {
    console.log(index, row.id)
    let data = {
        _gp: "admin.role",
        _mt: "delete",
        roleId: row.id
    }
    ElMessageBox.confirm(
        '请问是否删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }
    ).then(() => {
        get(data).then((res) => {
            if(200==res.errno){
                ElMessage.success("删除成功")
                roleList()
            }else{
                ElMessage.error(res.errmsg)
            }
        })
    })
        .catch(() => {
            ElMessage.info("取消操作")
        })
}

//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    roleList()
    nextTick(() => {
        main.value.$el.click?.()
    })
}

let data = ref([]) //权限配置列表
let assignedPermissions = ref([]) //默认配置权限
let roleId = ref(0) //角色id
let treeRef = ref() //获取权限列表对象引用
const defaultProps = {
    children: 'children',
    label: 'label',
}
//授权列表
const handleAuthorization = (index: number, row: TypeAuthorization) => {
    roleId.value = row.id
    assignedPermissions.value = []
    let datas = {
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: row.id
    }
    get(datas).then((res) => {
        console.log(res)
        if (200 == res.errno) {
            data.value = res.data.systemPermissions
            assignedPermissions.value = res.data.assignedPermissions
            nextTick(()=>{
                dialogTableVisible.value = true
            })
        }
    })
}
//配置权限
const configurePermissions = ()=>{
    assignedPermissions.value = []
     let getdata = treeRef.value.getCheckedKeys(true)
     console.log(getdata)
     let menu = {
        _gp:"admin.role",
        _mt:"permissionSet",
        roleSetPermissionDTO:JSON.stringify({"roleId":roleId.value,"permissions":getdata})
     }
     post(menu).then((res)=>{
         console.log(res)
         if(200==res.errno){
            dialogTableVisible.value = false
            ElMessage.success("修改成功")
         }
     })
}
//滚动事件
let scrollTop=(e:Event)=>{
    rollHeight.value=Math.floor((e.target as EventTarget).scrollTop)
}
//监听滚动的距离
watch(rollHeight,(val:number)=>{
//    console.log(val);
  bool.value = val>60
})

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

roleList()
</script>
<style scoped lang="less">
.role-top {
    margin: 15px 0px;

    .el-input {
        width: 15vw;
        height: 30px;
    }
}

.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>